<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="keywords" content="lianzai管理系统">
    <meta name="description" content="lianzai管理系统">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="/css/stat.css" rel="stylesheet">
    <title>湖南精进智能系统总览</title>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html"/>
    <![endif]-->
    <style>
        /*地图标题*/
        .anchorBL{
            display:none;
        }
        .BMap_bubble_title{
            color:black;
            font-size:13px;
            font-weight: bold;
            text-align:left;
        }
        .BMap_pop div:nth-child(1){
            border-radius:7px 0 0 0;
        }
        .BMap_pop div:nth-child(3){
            border-radius:0 7px 0 0;background:#ABABAB;;
            /*background: #ABABAB;*/
            width:23px;
            width:0px;height:0px;
        }
        .BMap_pop div:nth-child(3) div{
            border-radius:7px;
        }
        .BMap_pop div:nth-child(5){
            border-radius:0 0 0 7px;
        }
        .BMap_pop div:nth-child(5) div{
            border-radius:7px;
        }
        .BMap_pop div:nth-child(7){
            border-radius:0 0 7px 0 ;
        }

    </style>
</head>
<body class="bg_style" style="overflow-x: auto;width:100%;height:900px">
<div class=" logo_class" style="display:block">
    <div style="font-size:24px;">
        <img src="img/logo.png" width="45px" height="45px"/>
        <span style="margin-left:20px">湘泊客智能停车系统总览</span>
    </div>
</div>
<div class="head_div" style="display:block">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 nav_div" >
                <!--<div class="col-lg-2 nav_2" style="color:#a7b1c2;">首页</div>
                <div class="col-lg-2 nav_2" >小区管理</div>
                <div class="col-lg-2 nav_2" >汽车管理</div>
                <div class="col-lg-2 nav_2" >商户管理</div>
                <div class="col-lg-2 nav_2" >相机管理</div>
                <div class="col-lg-2 nav_2" >系统管理</div>-->
            </div>
            <div style="float:right;margin-top:30px;">
                <p  style="float:right;margin-top:5px;margin-right:-20px"><a  href="javascript:;"  onclick="fullScreen()" id="full_a" style="color:#ffffff;text-decoration: none;cursor: pointer">【进入全屏】</a><a href="./index" style="color:#ffffff;text-decoration: none;cursor: pointer">【返回】</a></p>
                <!--<div class="col-lg-2" style="cursor: pointer"><img src="img/fullscreen.png" width="25px" height="25px" onclick="fullScreen()"/></div>
                <div class="col-lg-10" style="margin-top:2px;padding-left:20px"><a href="./index" style="color:#ffffff;text-decoration: none;cursor: pointer">返回</a></div>-->
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-right:0px">
    <div style="padding:0">
        <p class="control_div" style="float:left;">
            主控台
        </p>

    </div>
</div>

<div class="container_s" >
    <div >
        <div class="col-lg-3" style="padding-left:0px">
            <div class="col-lg-12" style="padding-bottom:10px">
                <div class="inner2">
                    <div class="titleBar1 left_1_00" style="padding-left:10px">
                        <div class="col-lg-12" style="margin-top:-5px;">
                            <div class="money_big white " id="left_top_div" th:text="${yearFeeMap.sum_fee}">--</div>
                            <div class="money_small mb0">2019年车场收缴费用（元）</div>
                        </div>
                        <div class="col-lg-12" style="margin-top:-5px;margin-left:-5px">
                            <div id="barDiv" class="left_1_01" style=" width:100%"></div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-lg-12" style="padding-bottom:10px;padding-top:10px">
                <div class="inner2">
                    <div class="titleBar1 left_2_01" style="">
                        <div class="titleBar">停车场月度收缴费用排行（元）</div>
                        <div class="money_div" >
                            <div class="percent_div">
                                <div class="percent flex unit_2 item_h"  th:each="seg,stat:${communityFeeList}">
                                    <span style="display:inline-block;width:20%; cursor: pointer;" th:title="${seg.c_name}" th:text="${stat.index+1}+'.'+${seg.c_name}"></span>
                                    <div class="percentBg flex-1">
                                        <div th:if="${stat.index == 0}" class="per" th:style="'width:100%; background: #0BA7FF'"></div>
                                        <div th:if="${stat.index == 1}" class="per" th:style="'width:100%; background: #0EB4F9'"></div>
                                        <div th:if="${stat.index == 2}" class="per" th:style="'width:100%; background: #16C5EF'"></div>
                                        <div th:if="${stat.index == 3}" class="per" th:style="'width:100%; background: #24D3E8'"></div>
                                        <div th:if="${stat.index == 4}" class="per" th:style="'width:100%; background: #26E0DA'"></div>
                                    </div>
                                    <em style="display:inline-block;width:13%" th:title="${#numbers.formatDecimal(seg.fee,0,'COMMA',2,'POINT')}+'元'" th:text="${#numbers.formatDecimal(seg.fee,0,'COMMA',2,'POINT')}"></em>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12" style="padding-bottom:20px;padding-top:10px">
                <div class="inner2">
                    <div class="titleBar1 left_2_02" style="">
                        <div class="titleBar">停车场建设进度排行</div>
                        <div class="money_div" >
                            <div class="percent_div">

                                <div class="percent flex unit_2 item_h" style="" th:each="seg,stat:${parkingList}">
                                    <span style="display:inline-block;width:20%; cursor: pointer;" th:title="${seg.p_name}" th:text="${stat.index+1}+'.'+${seg.p_name}"></span>
                                    <div class="percentBg flex-1">
                                        <div th:if="${stat.index == 0}" class="per" th:style="'width:'+${seg.rate}+'%; background: #0BA7FF'"></div>
                                        <div th:if="${stat.index == 1}" class="per" th:style="'width:'+${seg.rate}+'%; background: #0EB4F9'"></div>
                                        <div th:if="${stat.index == 2}" class="per" th:style="'width:'+${seg.rate}+'%; background: #16C5EF'"></div>
                                        <div th:if="${stat.index == 3}" class="per" th:style="'width:'+${seg.rate}+'%; background: #24D3E8'"></div>
                                        <div th:if="${stat.index == 4}" class="per" th:style="'width:'+${seg.rate}+'%; background: #26E0DA'"></div>
                                    </div>
                                    <em style="display:inline-block;width:13%" th:text="${seg.rate}+'%'"></em>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col-lg-6" style="padding-right:10px;padding-left:10px">
            <div class="col-lg-12" style="padding-bottom:0px;z-index:1;">
                <div class="inner2" style="padding-right:0px;padding-left:0px">
                    <div class="titleBar1 m_h1" style="text-align:center;opacity: 0.9">
                        <div class="col-lg-2" style="width:20%">
                            <div class="money_big white remainCount" id="c_total_div">0</div>
                            <div class="money_small mb0">车场总数</div>
                        </div>
                        <div class="col-lg-2" style="width:20%">
                            <div class="money_big white remainCount" id="p_use_div">0</div>
                            <div class="money_small mb0">可用车位</div>
                        </div>
                        <div class="col-lg-2" style="width:20%">
                            <div class="money_big white remainCount" id="p_total_div">0</div>
                            <div class="money_small mb0">车位总数</div>
                        </div>
                        <div class="col-lg-2" style="width:20%">
                            <div class="money_big white remainCount"  id="user_div" th:text="${userMap.user_total}"></div>
                            <div class="money_small mb0">用户总数</div>
                        </div>
                        <div class="col-lg-2" style="width:20%">
                            <div class="money_big white remainCount" id="p_device_div">0</div>
                            <div class="money_small mb0">设备总数</div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="col-lg-12" style="padding-top:0px;position:absolute;top:5px;padding-right:20px">
                <div class="inner2" style="padding-right:0px;padding-left:0px;background: #1C253F;padding-bottom:0px;">
                    <div class="titleBar1 m_h2" style="background: #0E1426;opacity:1">
                        <div id="map" class="m_h2" style=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3" style="padding-right:5px;">
            <div class="col-lg-12" style="padding-bottom:10px;padding-top:5px">
                <div class="inner2">
                    <div class="titleBar1 r_h1">
                        <div class="titleBar">黑名单</div>
                        <div class="col-lg-12 black_title">
                            <div class="col-lg-2 padding-title">序号</div>
                            <div class="col-lg-5 padding-title">日期</div>
                            <div class="col-lg-5 padding-title">车牌号</div>
                        </div>
                        <div id="moocBox" class="col-lg-12" style="margin-top:5px;">
                            <div class="col-lg-12 item-scroll" th:each="seg,stat:${blackList}" >
                                <div class="col-lg-2 padding-title" th:text="${stat.index+1}">-</div>
                                <div class="col-lg-5 padding-title" th:text="${seg.ct}">----/--/--</div>
                                <div class="col-lg-5 padding-title" th:text="${seg.car_num}">------</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12" style="padding-bottom:20px;padding-top:10px">
                <div class="inner2">
                    <div class="titleBar1 r_h20" style="">
                        <div class="titleBar">本月综合指数评估</div>
                        <div class="col-lg-12" >
                            <div id="radaDiv" class="r_h21" style=" width:100%"></div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="compositeMap" th:value='${compositeMap}'>
<input type="hidden" id="mapList" th:value='${mapList}'>
<input type="hidden" id="monthFeeList" th:value='${monthFeeList}'>
<script type="text/javascript">

</script>
</body>
<script src="/js/jquery.min.js?v=2.1.4" th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script src="/js/bootstrap.min.js?v=3.3.6" th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script src="/js/plugins/echarts/echarts.js" th:src="@{/js/plugins/echarts/echarts.js}"></script>
<script src="/js/plugins/echarts/index.js" th:src="@{/js/plugins/echarts/index.js}"></script>
<script src="/js/plugins/count/countUp.js" th:src="@{/js/plugins/count/countUp.js}"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=lRkh4MA1ks32EZ9exkAX4a3EVODiGTUY"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</html>
<script type="text/javascript">
    // 百度地图API功能
    map = new BMap.Map("map");
    // 百度坐标系坐标(地图中需要使用这个)
    var bPoints = new Array();
    //设置中心点
    map.centerAndZoom(new BMap.Point(112.94547319535287,28.23488939994364), 15);//默认长沙
    //信息窗口样式
    var opts = {
        width: 160,     // 信息窗口宽度
        height: 105,     // 信息窗口高度
        title : "", // 信息窗口标题
        enableMessage:false //设置允许信息窗发送短息
    };
    addMarker(chartData,detailData);

    //创建标注点并添加到地图中
    function addMarker(chart,detail){
        //循环建立标注点
        for(var i=0;i<chart.length;i++){
            var blueIcon = new BMap.Icon("img/loc1.png",new BMap.Size(32,32));
            var point = new BMap.Point(chart[i].value[0],chart[i].value[1]); //将标注点转化成地图上的点
            bPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别
            //var marker = new BMap.Marker(point,{icon:blueIcon});  // 创建标注
            var marker = new BMap.Marker(point);  // 创建标注
            var content = chart[i].name;
            map.addOverlay(marker);               // 将标注添加到地图中
            addClickHandler(chart[i],detailData[i],marker);
        }
    }

    function addClickHandler(chart,detail,marker){
        marker.addEventListener("click",function(e){
            openInfo(chart,detail,e)}
        );
    }
    function openInfo(chart,detail,e){
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        opts.width=100;
        opts.title = "<span style='color: #4D4D4D;font-size:14px;font-weight: bold'>"+chart.name+"</span>";
        var content = "<span style='color: #4D4D4D;font-size:12px'>车位总数："+formatNum(detail.carsitTotal)+"个</span><br><span style='color: #4D4D4D;font-size:12px'>可用车位："+formatNum(detail.canuseTotal)+"个</span><br><span style='color: #4D4D4D;font-size:12px'>设备总数："+formatNum(detail.deviceTotal)+"个</span><br><span style='color: #4D4D4D;font-size:12px'>地址："+detail.address+"</span>"
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        map.openInfoWindow(infoWindow,point); //开启信息窗口
    }
    // 根据点的数组自动调整缩放级别
    function setZoom(bPoints) {
        var view = map.getViewport(eval(bPoints));
        var mapZoom = view.zoom;
        var centerPoint = view.center;
        map.centerAndZoom(centerPoint, mapZoom);
    }

    map.enableScrollWheelZoom(true);

    /*var mapStyle ={
        features: ["road","building","water","land"],//隐藏地图上的"poi",
        style : 'midnight',
    };
    map.setMapStyle(mapStyle);*/

   /* map.setMapStyleV2({
        styleId: 'c6c00c0dbbaa02a0c2905b85dc22e74a'
    });*/
    $.get('/js/plugins/echarts/style.json',function(styleJson){
        map.setMapStyle({styleJson: styleJson });
    });

    //var mapType2 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
    //map.addControl(mapType2);
    setTimeout(function () {
        setZoom(bPoints);
    }, 1000)
</script>